import 'package:card_swiper/card_swiper.dart';
import 'package:flip_card/flip_card.dart';
import 'package:flip_card/flip_card_controller.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:get/get.dart';
import 'package:yi_shop/model/lucky.dart';
import 'package:yi_shop/route/index.dart';
import 'package:yi_shop/utils/colors.dart';
import 'package:yi_shop/utils/styles.dart';
import 'package:yi_shop/utils/svg.dart';
import 'package:yi_shop/utils/tools.dart';

class LuckyDrawController extends GetxController {
  RxInt count = 8.obs;

  List<String> list = [
    '恭喜原型大师获取20元优惠券',
    '恭喜原型大师获取50元优惠券',
    '恭喜原型大师获取30元优惠券',
    '恭喜原型大师获取10元优惠券'
  ];

  List<Rx<LuckyDrawModel>> luckys = [];

  @override
  void onInit() {
    for (var i = 0; i < 9; i++) {
      luckys.add(Rx(LuckyDrawModel(value: 10)));
    }
    super.onInit();
  }

  Future<void> onFlipCard(int index) async {
    int? value = await Get.dialog<int?>(
        AlertDialog(
          content: Container(
            width: 300,
            height: 280,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(6),
                border: Border.all(
                  color: ColorsUtils.parseColorFromHexString(
                      ColorsUtils.colorE4e4),
                ),
                color: Colors.white),
            child: Column(
              children: [
                Container(
                  padding: const EdgeInsets.only(top: 15, bottom: 20),
                  alignment: Alignment.center,
                  child: RichText(
                    text: TextSpan(children: [
                      TextSpan(
                          text: '恭喜您获得了',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color6666,
                              fontSize: StylesUtils.fontSize16,
                              fontWeight: FontWeight.w500)),
                      TextSpan(
                          text: '10成长值',
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color3333,
                              fontSize: StylesUtils.fontSize16,
                              fontWeight: FontWeight.w500))
                    ]),
                  ),
                ),
                Center(
                  child: SizedBox(
                    width: 90,
                    child: Column(
                      children: [
                        Container(
                          height: 90,
                          decoration: BoxDecoration(
                              color: ColorsUtils.parseColorFromHexString(
                                  ColorsUtils.colorF26f),
                              borderRadius: const BorderRadius.only(
                                  topRight: Radius.circular(5),
                                  topLeft: Radius.circular(5))),
                          alignment: Alignment.center,
                          child: SvgUtils.assetName('u6690',
                              width: 40, height: 40),
                        ),
                        Container(
                          height: 26,
                          alignment: Alignment.center,
                          decoration: BoxDecoration(
                              color: ColorsUtils.parseColorFromHexString(
                                  ColorsUtils.colorF2f2),
                              borderRadius: const BorderRadius.only(
                                  bottomRight: Radius.circular(5),
                                  bottomLeft: Radius.circular(5))),
                          child: Text(
                            '10贡献值',
                            style: StylesUtils.customTextStyle(
                                color: ColorsUtils.color6666,
                                fontSize: StylesUtils.fontSize13),
                          ),
                        )
                      ],
                    ),
                  ),
                ),
                Container(
                  margin: const EdgeInsets.only(top: 25),
                  alignment: Alignment.center,
                  child: TextButton(
                      onPressed: () {
                        Get.back(result: 1);
                      },
                      style: ButtonStyle(
                          backgroundColor: MaterialStatePropertyAll(
                              ColorsUtils.parseColorFromHexString(
                                  ColorsUtils.colorF26f)),
                          fixedSize:
                              const MaterialStatePropertyAll(Size(140, 40)),
                          alignment: Alignment.center,
                          shape: MaterialStatePropertyAll(
                              RoundedRectangleBorder(
                                  borderRadius: BorderRadius.circular(20)))),
                      child: Text(
                        '领取',
                        style: StylesUtils.customTextStyle(
                            fontSize: StylesUtils.fontSize13),
                      )),
                )
              ],
            ),
          ),
          backgroundColor: Colors.transparent,
          shape: const RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(0))),
          alignment: Alignment.center,
          contentPadding: EdgeInsets.zero,
          elevation: 0,
          insetPadding: EdgeInsets.zero,
          surfaceTintColor: Colors.transparent,
        ),
        barrierColor: ColorsUtils.rgba(0, 0, 0, 0.6));
    Get.log('value = $value');
    luckys[index].update((val) {
      val?.checked = !val.checked;
    });
  }

  Widget buildFront(int index) {
    return Column(
      children: [
        Container(
          height: 90,
          decoration: BoxDecoration(
              color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorCccc),
              borderRadius: const BorderRadius.only(
                  topRight: Radius.circular(5), topLeft: Radius.circular(5))),
          alignment: Alignment.center,
          child: SvgUtils.assetName('u6672', width: 38, height: 40),
        ),
        Container(
          height: 26,
          alignment: Alignment.center,
          decoration: BoxDecoration(
              color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF2f2),
              borderRadius: const BorderRadius.only(
                  bottomRight: Radius.circular(5),
                  bottomLeft: Radius.circular(5))),
          child: Text(
            '翻牌',
            style: StylesUtils.customTextStyle(
                color: ColorsUtils.color6666, fontSize: StylesUtils.fontSize13),
          ),
        )
      ],
    );
  }

  Widget buildBack(int index) {
    return Column(
      children: [
        Container(
          height: 90,
          decoration: BoxDecoration(
              color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF26f),
              borderRadius: const BorderRadius.only(
                  topRight: Radius.circular(5), topLeft: Radius.circular(5))),
          alignment: Alignment.center,
          child: SvgUtils.assetName(index % 2 == 0 ? 'u6676' : 'u6690',
              width: 40, height: 40),
        ),
        Container(
          height: 26,
          alignment: Alignment.center,
          decoration: BoxDecoration(
              color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF2f2),
              borderRadius: const BorderRadius.only(
                  bottomRight: Radius.circular(5),
                  bottomLeft: Radius.circular(5))),
          child: Text(
            '10贡献值',
            style: StylesUtils.customTextStyle(
                color: ColorsUtils.color6666, fontSize: StylesUtils.fontSize13),
          ),
        )
      ],
    );
  }
}

class LuckyDrawPage extends GetView<LuckyDrawController> {
  const LuckyDrawPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        leading: ToolsUtils.builderLeading(),
        title: Text(
          '幸运抽奖',
          style: StylesUtils.customTextStyle(
            fontWeight: FontWeight.w700,
            fontSize: StylesUtils.fontSize18,
          ),
        ),
        actions: [
          IconButton(
              onPressed: () {
                Get.toNamed(RoutePath.luckyRule);
              },
              icon: SvgUtils.assetName('u6932', width: 20, height: 20))
        ],
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Container(
              height: 250,
              color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF048),
              child: Column(
                children: [
                  Container(
                    alignment: Alignment.centerRight,
                    padding: EdgeInsets.only(right: 15.w, top: 10),
                    child: InkWell(
                      onTap: () {
                        Get.toNamed(RoutePath.luckyRecord);
                      },
                      child: RichText(
                        text: TextSpan(children: [
                          WidgetSpan(
                              child: SvgUtils.assetName('u6934',
                                  width: 19, height: 20),
                              alignment: PlaceholderAlignment.middle),
                          TextSpan(
                              text: ' 中奖记录',
                              style: StylesUtils.customTextStyle())
                        ]),
                      ),
                    ),
                  ),
                  Container(
                    padding: const EdgeInsets.only(top: 25),
                    alignment: Alignment.center,
                    child: Text(
                      '剩余抽奖机会',
                      style: StylesUtils.customTextStyle(
                          fontSize: StylesUtils.fontSize18,
                          fontWeight: FontWeight.w700),
                    ),
                  ),
                  Container(
                    padding: const EdgeInsets.only(top: 20),
                    alignment: Alignment.center,
                    child: CircleAvatar(
                      radius: 50,
                      backgroundColor: Colors.white,
                      child: Stack(
                        children: [
                          Center(
                            child: Obx(() => Text(
                                  '${controller.count}',
                                  style: StylesUtils.customTextStyle(
                                      fontSize: StylesUtils.fontSize36,
                                      color: ColorsUtils.color3333),
                                )),
                          ),
                          Positioned(
                            top: 0,
                            right: 15,
                            bottom: 0,
                            child: Center(
                              child: Text(
                                '次',
                                style: StylesUtils.customTextStyle(
                                    color: ColorsUtils.color3333),
                              ),
                            ),
                          )
                        ],
                      ),
                    ),
                  ),
                  Container(
                    padding: const EdgeInsets.only(top: 15),
                    alignment: Alignment.center,
                    child: Text(
                      '点击卡牌进行随机抽奖',
                      style: StylesUtils.customTextStyle(
                          color: ColorsUtils.colorF2f2),
                    ),
                  )
                ],
              ),
            ),
            Container(
              padding: const EdgeInsets.only(top: 15, left: 20, right: 20),
              alignment: Alignment.centerLeft,
              child: Wrap(
                spacing: 10,
                alignment: WrapAlignment.start,
                crossAxisAlignment: WrapCrossAlignment.center,
                children: [
                  SvgUtils.assetName('u6838', width: 20, height: 20),
                  LayoutBuilder(builder: (_, c) {
                    return Container(
                      height: 20,
                      width: c.maxWidth - 30,
                      alignment: Alignment.centerLeft,
                      child: Swiper.list<String>(
                          list: controller.list,
                          loop: true,
                          autoplay: true,
                          duration: 800,
                          autoplayDelay: 3000,
                          itemHeight: 20,
                          scrollDirection: Axis.vertical,
                          builder: (_, str, index) {
                            return Text(
                              str,
                              maxLines: 1,
                              overflow: TextOverflow.ellipsis,
                              style: StylesUtils.customTextStyle(
                                  color: ColorsUtils.color3333),
                            );
                          }),
                    );
                  }),
                ],
              ),
            ),
            Container(
              padding: const EdgeInsets.only(left: 15, right: 15, top: 20),
              child: StaggeredGrid.count(
                crossAxisCount: 3,
                crossAxisSpacing: 20,
                mainAxisSpacing: 15,
                children: controller.luckys
                    .asMap()
                    .map((key, value) {
                      return MapEntry(key, Obx(() {
                        if (value.value.checked) {
                          return controller.buildBack(key);
                        }
                        return FlipCard(
                          front: controller.buildFront(key),
                          back: controller.buildBack(key),
                          controller: FlipCardController(),
                          side: value.value.checked
                              ? CardSide.BACK
                              : CardSide.FRONT,
                          onFlip: () {
                            if (controller.luckys[key].value.checked) {
                              return;
                            }
                            if (controller.count < 1) {
                              return;
                            }
                            controller.count--;
                            controller.onFlipCard(key);
                          },
                        );
                      }));
                    })
                    .values
                    .toList(),
              ),
            )
          ],
        ),
      ),
    );
  }
}
